<template>
  <div @click="changeDropdown" v-click-outside="handleClickOut">
    <div :class="['inline-item selectlist-box', disabled ? 'disabled' : '']">
      <div class="inline-item ellipsis" style="float: left; margin-right: 4px">
        <span>
          {{ data && data[value].label }}
        </span>
      </div>
      <i class="inline-item c-icon select-arrow">
        <svg
          v-show="!dropdown"
          width="16"
          height="16"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M36 18L24 30L12 18"
            stroke="#333"
            stroke-width="4"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
        <svg
          v-show="dropdown"
          width="16"
          height="16"
          viewBox="0 0 48 48"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13 30L25 18L37 30"
            stroke="#333"
            stroke-width="4"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </i>

      <div
        class="dropdown-panel"
        :style="
          dropdown
            ? `left: 0px; top: 38px; width: 94px;display:block`
            : `left: 0px; top: 38px; width: 94px;`
        "
      >
        <div
          ref="selectMore"
          :class="[
            'select-board',
            data && data.length > 50 ? 'select-board-more' : '',
          ]"
        >
          <div class="select-scroll">
            <div
              @click="selectItem(index, item)"
              v-for="(item, index) in data"
              :key="index"
            >
              <div
                :class="[
                  'select-item-cell ellipsis',
                  index == value ? 'selected' : '',
                ]"
              >
                {{ item && item.label }}
              </div>
            </div>
          </div>
        </div>
        <div class="select-wrap">
          <div
            :class="[
              data && data.length > 50 ? 'select-scroll-more' : 'select-scroll',
            ]"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { stringify } from "querystring";
import { ref, computed, watch } from "vue";
let dropdown = ref(false);
interface CellType {
  label: string;
  value: number | string;
  lunar?: boolean | undefined;
}

/**
 * @value index
 */
interface Props {
  data: Array<CellType>;
  value?: number;
  disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  value: 0,
  disabled: false,
});
watch(
  () => props.value,
  (newValue, oldValue) => {},
  { immediate: true }
);

let selectMore = ref(null);

const emit = defineEmits(["change", "update:value", "change-visible"]);

let changeDropdown = () => {
  if (props.disabled) {
    return;
  }
  dropdown.value = !dropdown.value;
  setTimeout(() => {
    if (selectMore.value) {
      let itemHeight: number = 26.8; //下拉项的高度
      (<HTMLDivElement>selectMore.value).scrollTo(0, itemHeight * props.value);
    }
  }, 100);
  emit("change-visible", dropdown.value);
};
let handleClickOut = () => {
  dropdown.value = false;
};
let selectItem = (index: number, item: any) => {
  emit("update:value", index);
  //https://blog.csdn.net/l2345432l/article/details/126017725
  emit("change", item, index);
};
</script>
<style>
.inline-item {
  display: inline-block;
  vertical-align: middle;
}

.selectlist-box {
  border: 1px solid #d7d9e0;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 6px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  background: #ffffff;
  user-select: none;
  min-width: 80px;
}
.selectlist-box.disabled {
  background: #e5e5e5;
  cursor: not-allowed;
}
.dropdown-panel {
  display: none;
  position: absolute;
  box-sizing: border-box;
  box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
  border-radius: 6px;
  background: #ffffff;
  z-index: 10;
  cursor: default;
  overflow: hidden;
}
.select-board {
  position: relative;
  box-sizing: border-box;
  padding: 9px 0;
  overflow: auto;
  left: 16px;
}
.select-board-more {
  max-height: 312px;
}
.select-item {
  width: 80px;
  float: left;
  _display: inline;
  margin-right: 16px;
  list-style: none;
}
.select-item-cell {
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 7px;
  padding-top: 7px;
  cursor: pointer;
  width: 74px;
}
.select-item-cell.selected {
  color: #315efb;
}

.select-item-cell:hover {
  color: #315efb;
}

.select-item-cell .selected {
  color: #315efb;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: text-bottom;
  font-style: normal;
  overflow: hidden;

  font-family: cIconfont !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
.select-arrow {
  color: #9195a3;
  float: right;
  background: url(../../assets/icons_d5b04cc.gif) no-repeat 0 0;
}
.select-scroll {
  position: relative;
  overflow: hidden;
}
.select-scroll-more {
  width: 6px;
  background: transparent;
  height: 294px;
}
.select-wrap {
  display: none;
  position: absolute;
  top: 9px;
  right: 0;
  width: 6px;
  border-top: none;
  background-color: #fff;
}
</style>
